<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>安全中心</title>
		<link rel="stylesheet" href="css/Security.css">
		<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
		<script type="text/javascript" src="js/Security.js" ></script>
		<script type="text/javascript" src="js/jquery2.1.4.min.js"></script>
		<script type="text/javascript">
			$(function()
			{
				$("#global-top-right-mypay").mouseover(function()
				{
					$(".global-top-right-mypay-hidden").show();
				});
				$(".global-top-right-mypay-hidden").mouseover(function()
				{
					$(".global-top-right-mypay-hidden").show();
				});
				$(".global-top-right-mypay-hidden").mouseout(function()
				{
					$(".global-top-right-mypay-hidden").hide();
				});
				$(".global-top-right-a").mouseover(function()
				{
					$(".global-top-right-mypay-hidden").hide();
				});
//				$(".global-top-right-mypay-hidden").mouseout(function()
//				{
//					setTimeout(function()
//					{$(".global-top-right-mypay-hidden").hide();},3000);
//					
//				});
				$("#global-top-right-service").mouseover(function()
				{
					$(".global-top-right-service-hidden").show();
				});
				$(".global-top-right-service-hidden").mouseover(function()
				{

					$(".global-top-right-service-hidden").show();
					
				});
				$(".global-top-right-service-hidden").mouseout(function()
				{

					$(".global-top-right-service-hidden").hide();
					
				});
				$(".global-top-right-a").mouseover(function()
				{
					$(".global-top-right-service-hidden").hide();
				});
			});
	    $(function()
		{
					$("#orange-li1").click(function()
					{
						$("#orange-li2").css("background-color","#F39100");
						$("#orange-li-a2").css("color","#fff");
						$("#orange-li3").css("background-color","#F39100");
						$("#orange-li-a3").css("color","#fff");
						$("#orange-li4").css("background-color","#F39100");
						$("#orange-li-a4").css("color","#fff");
						$("#orange-li5").css("background-color","#F39100");
						$("#orange-li-a5").css("color","#fff");
					})
					$("#orange-li2").click(function()
					{
						$("#orange-li1").css("background-color","#F39100");
						$("#orange-li-a1").css("color","#fff");
						$("#orange-li3").css("background-color","#F39100");
						$("#orange-li-a3").css("color","#fff");
						$("#orange-li4").css("background-color","#F39100");
						$("#orange-li-a4").css("color","#fff");
						$("#orange-li5").css("background-color","#F39100");
						$("#orange-li-a5").css("color","#fff");
					})
					$("#orange-li3").click(function()
					{
						$("#orange-li1").css("background-color","#F39100");
						$("#orange-li-a1").css("color","#fff");
						$("#orange-li2").css("background-color","#F39100");
						$("#orange-li-a2").css("color","#fff");
						$("#orange-li4").css("background-color","#F39100");
						$("#orange-li-a4").css("color","#fff");
						$("#orange-li5").css("background-color","#F39100");
						$("#orange-li-a5").css("color","#fff");
					})
					$("#orange-li4").click(function()
					{
						$("#orange-li1").css("background-color","#F39100");
						$("#orange-li-a1").css("color","#fff");
						$("#orange-li3").css("background-color","#F39100");
						$("#orange-li-a3").css("color","#fff");
						$("#orange-li2").css("background-color","#F39100");
						$("#orange-li-a2").css("color","#fff");
						$("#orange-li5").css("background-color","#F39100");
						$("#orange-li-a5").css("color","#fff");
					})
					$("#orange-li5").click(function()
					{
						$("#orange-li1").css("background-color","#F39100");
						$("#orange-li-a1").css("color","#fff");
						$("#orange-li3").css("background-color","#F39100");
						$("#orange-li-a3").css("color","#fff");
						$("#orange-li4").css("background-color","#F39100");
						$("#orange-li-a4").css("color","#fff");
						$("#orange-li2").css("background-color","#F39100");
						$("#orange-li-a2").css("color","#fff");
					})
					
					$(".safe-body-right-a1").click(function()
					{
						$(".safe-body-right-a1").css("font-weight","bold");
						$(".safe-body-right-a2").css("font-weight","normal");
						$(".safe-body-right-a3").css("font-weight","normal");
					})
					$(".safe-body-right-a2").click(function()
					{
						$(".safe-body-right-a2").css("font-weight","bold");
						$(".safe-body-right-a1").css("font-weight","normal");
						$(".safe-body-right-a3").css("font-weight","normal");
						
					})
					$(".safe-body-right-a3").click(function()
					{
						$(".safe-body-right-a3").css("font-weight","bold");
						$(".safe-body-right-a2").css("font-weight","normal");
						$(".safe-body-right-a1").css("font-weight","normal");
					})
		});
		
		$(function()
		{
				$(".safe-body-right-a1").click(function()
				{
					$(".safe-body-right-contant1").show();
					$(".safe-body-right-contant2").hide();
					$(".safe-body-right-contant3").hide();
					
				})
				$(".safe-body-right-a2").click(function()
				{
					$(".safe-body-right-contant2").show();
					$(".safe-body-right-contant1").hide();
					$(".safe-body-right-contant3").hide();
				})
				$(".safe-body-right-a3").click(function()
				{
					$(".safe-body-right-contant3").show();
					$(".safe-body-right-contant1").hide();
					$(".safe-body-right-contant2").hide();
				})
			$("#orange-li1").click(function()
			{
				$(".safe-maner").show();
				$(".safe-tool").hide();
				$(".safe-uni").hide();
				$(".safe-scho").hide();
				$(".safe-ser").hide();
			})
			$("#orange-li2").click(function()
			{
				$(".safe-maner").hide();
				$(".safe-tool").show();
				$(".safe-uni").hide();
				$(".safe-scho").hide();
				$(".safe-ser").hide();
			})
			$("#orange-li3").click(function()
			{
				$(".safe-maner").hide();
				$(".safe-tool").hide();
				$(".safe-uni").show();
				$(".safe-scho").hide();
				$(".safe-ser").hide();
			})
			$("#orange-li4").click(function()
			{
				$(".safe-maner").hide();
				$(".safe-tool").hide();
				$(".safe-uni").hide();
				$(".safe-scho").show();
				$(".safe-ser").hide();
			})
			$("#orange-li5").click(function()
			{
				$(".safe-maner").hide();
				$(".safe-tool").hide();
				$(".safe-uni").hide();
				$(".safe-scho").hide();
				$(".safe-ser").show();
			})
		});
		
		$(function()
		{
			var timer=null;
			var cur=0;
			var len=$(".select-button li").length;
			
			$(".lunbotu").hover(function()
			{clearInterval(timer);},function(){showImg();});
			
			$(".select-button li").click(function()
			{
				clearInterval(timer);
				cur=$(this).index();
//				console.log("cur:"+cur+"  timer:"+timer);
				$(this).addClass("active").siblings().removeClass("active");
//				console.log($(".lunbotu img").eq(cur).siblings("img").length);
				$(".lunbotu img").eq(cur).fadeIn(200).siblings("img").fadeOut(200);
			});
			
			function showImg()
			{
				timer=setInterval(function()
				{
					cur++;
					if(cur>=len){cur=0;}
//					console.log("cur:"+cur);
					$(".lunbotu img").eq(cur).fadeIn(200).siblings("img").fadeOut(200);
					$(".select-button li").eq(cur).addClass("active").siblings().removeClass("active");
					
				},1000);
				
			}
			showImg();
		});
		
		
		$(function()
		{
			var timer=null;
			var cur=0;
			var len=$(".slide-affairs li").length;
			
			$(".slide-affairs li").hover(function()
			{clearInterval(timer);},function(){showMesage();});
			
			$(".slide-affairs-button li").click(function()
			{
				clearInterval(timer);
				cur=$(this).index();
//				console.log("cur:"+cur+"  timer:"+timer);
				$(this).addClass("active").siblings().removeClass("active");
//				console.log($(".lunbotu img").eq(cur).siblings("img").length);
				$(".slide-affairs li").eq(cur).show(10).delay(12000).siblings("li").hide(10);
			});
			
			function showMesage()
			{
				timer=setInterval(function()
				{
					cur++;
					if(cur>=len){cur=0;}
//					console.log("cur:"+cur);
					$(".slide-affairs li").eq(cur).show(10).delay(3000).siblings("li").hide(10);
//					$(".select-button li").eq(cur).addClass("active").siblings().removeClass("active");
					
				},3000);
				
			}
			showMesage();
		});
		
		
		
		$(function()
		{
			$(".safe-body-slide-a1").click(function()
					{
						$(".safe-body-slide-a1").css("font-weight","bold");
						$(".safe-body-slide-a2").css("font-weight","normal");
						$(".safe-body-slide-a3").css("font-weight","normal");
						$(".safe-body-slide-a4").css("font-weight","normal");
						$(".safe-body-slide-a5").css("font-weight","normal");
					})
					$(".safe-body-slide-a2").click(function()
					{
						$(".safe-body-slide-a2").css("font-weight","bold");
						$(".safe-body-slide-a1").css("font-weight","normal");
						$(".safe-body-slide-a3").css("font-weight","normal");
						$(".safe-body-slide-a4").css("font-weight","normal");
						$(".safe-body-slide-a5").css("font-weight","normal");
						
					})
					$(".safe-body-slide-a3").click(function()
					{
						$(".safe-body-slide-a3").css("font-weight","bold");
						$(".safe-body-slide-a2").css("font-weight","normal");
						$(".safe-body-slide-a1").css("font-weight","normal");
						$(".safe-body-slide-a4").css("font-weight","normal");
						$(".safe-body-slide-a5").css("font-weight","normal");
					})
					$(".safe-body-slide-a4").click(function()
					{
						$(".safe-body-slide-a4").css("font-weight","bold");
						$(".safe-body-slide-a2").css("font-weight","normal");
						$(".safe-body-slide-a1").css("font-weight","normal");
						$(".safe-body-slide-a3").css("font-weight","normal");
						$(".safe-body-slide-a5").css("font-weight","normal");
					})
					$(".safe-body-slide-a5").click(function()
					{
						$(".safe-body-slide-a5").css("font-weight","bold");
						$(".safe-body-slide-a2").css("font-weight","normal");
						$(".safe-body-slide-a1").css("font-weight","normal");
						$(".safe-body-slide-a3").css("font-weight","normal");
						$(".safe-body-slide-a4").css("font-weight","normal");
					})
					
				$(".safe-body-slide-li1").mouseenter(function()
				{
					$(".safety-class-body-slide-img1").animate({marginTop:"0px"},60);
				})
				$(".safe-body-slide-li1").mouseleave(function()
				{
					$(".safety-class-body-slide-img1").animate({marginTop:"0px"},1);
				})
				$(".safe-body-slide-li2").mouseenter(function()
				{
					$(".safety-class-body-slide-img1").animate({marginTop:"-253px"},60);
				})
				$(".safe-body-slide-li2").mouseleave(function()
				{
					$(".safety-class-body-slide-img1").animate({marginTop:"-254px"},1);
				})
				$(".safe-body-slide-li3").mouseenter(function()
				{
					$(".safety-class-body-slide-img1").animate({marginTop:"-508px"},60);
				})
				$(".safe-body-slide-li3").mouseleave(function()
				{
					$(".safety-class-body-slide-img1").animate({marginTop:"-508px"},1);
				})
				$(".safe-body-slide-li4").mouseenter(function()
				{
					$(".safety-class-body-slide-img1").animate({marginTop:"-762px"},60);
				})
				$(".safe-body-slide-li4").mouseleave(function()
				{
					$(".safety-class-body-slide-img1").animate({marginTop:"-762px"},1);
				})
				$(".safe-body-slide-li5").mouseenter(function()
				{
					$(".safety-class-body-slide-img1").animate({marginTop:"-1016px"},60);
				})
				$(".safe-body-slide-li5").mouseleave(function()
				{
					$(".safety-class-body-slide-img1").animate({marginTop:"-1016px"},1);
				})
				
				
				
				
				$(".slide-affairs-button-li1").mouseenter(function()
				{
					$(".slide-affairs-button-li1").css("color","#FF6400");
				})
				$(".slide-affairs-button-li1").mouseleave(function()
				{
					$(".slide-affairs-button-li1").css("color","#CCC");
				})
				$(".slide-affairs-button-li2").hover(function()
				{
					$(".slide-affairs-button-li2").css("color","#FF6400");
				})
				$(".slide-affairs-button-li2").mouseleave(function()
				{
					$(".slide-affairs-button-li2").css("color","#CCC");
				})
		})
			
		</script>
		
		
	</head>
	<body>
		<div class="global-top">
			<div class="global-top-left">
				<span>
					<img src="img/global-top-phone.png">
					<span class="global-top-left-a">
						<a href="#手机支付宝">手机支付宝</a>
					</span>
				</span>
			</div>
			<div class="global-top-right">
				<ul>
					<li class="global-top-right-a">您好，xxx</li>
					<li class="global-top-right-a">|</li>
					<li><a class="global-top-right-a" href="#">退出</a></li>
					<li class="global-top-right-a">|</li>
					<li>
						<a id="global-top-right-mypay" href="#">我的支付宝</a>
						<div class="global-top-right-mypay-hidden">
							<div class="custom-information">
								<a href="#"><img src="img/个人头像.png"></a>
								<span>494136001@qq.com</span>
								<button class="show-money-button">
									<a href="#">显示余额</a>
								</button>
							</div>
							<hr style="width: 203px;color: ghostwhite;margin-left: 3px;">
							<div class="information-operate">
								<button class="top-up">
									<a href="#">充值</a>
								</button>
								<a href="#">提现</a>
								<a href="#">转账</a>
								<span><a href="#">交易记录</a></span>
							</div>
						</div>
					</li>
					<li class="global-top-right-a">|</li>
					<li><a class="global-top-right-a" href="Security.html">安全中心</a></li>
					<li class="global-top-right-a">|</li>
					<li>
						<a id="global-top-right-service" href="#">服务大厅</a>
						<div class="global-top-right-service-hidden">
							<div><img src="img/service-ques.png"><a href="#">常见问题</a></div>
							<div><img src="img/service-ques.png"><a href="#">自助服务</a></div>
							<hr style="width: 85px;color: ghostwhite;margin-left: 3px;margin-top: 10px;">
							<div><img src="img/service-pla.png"><a href="#">玩转支付宝</a></div>
						</div>
					</li>
					<li class="global-top-right-a">|</li>
					<li><a class="global-top-right-a" href="#">提建议</a></li>
				</ul>
			</div>
		</div>	
		<div class="global-header">
			<img src="img/logo.png" style="float: left;position:absolute;left:177px">
			<div style="width:120px;position:absolute;left:300px;border-left: 1px solid gray;vertical-align: 8px;padding: 7px;margin-left: 5px;color: #1A1A1A;">
				<h2>安全中心</h2>
			</div>
		</div>
		<div class="orange">
			<ul>
				<li class="orange-li" id="orange-li1" onclick="change_orange_style(1)" onclick="change_content(1)"><a id="orange-li-a1" class="orange-li-a">安全管家</a></li>
				<li class="orange-li" id="orange-li2" onclick="change_orange_style(2)" onclick="change_content(2)"><a id="orange-li-a2" class="orange-li-a">安全工具</a></li>
				<li class="orange-li" id="orange-li3" onclick="change_orange_style(3)" onclick="change_content(3)"><a id="orange-li-a3" class="orange-li-a">安全联盟</a></li>
				<li class="orange-li" id="orange-li4" onclick="change_orange_style(4)" onclick="change_content(4)"><a id="orange-li-a4" class="orange-li-a">安全学堂</a></li>
				<li class="orange-li" id="orange-li5" onclick="change_orange_style(5)" onclick="change_content(5)"><a id="orange-li-a5" class="orange-li-a">应急服务</a></li>
			</ul>
		</div>
		
		<div class="ALL-content">
			<div class="safe-maner">
				<div style="font-size: 12px;color: #CDCDCD; margin-top: 15px;" class="infor-last-login">上次登录：江苏无锡，2018年08月02日 11:37:21</div>
				<div class="safe-body">
					<div class="safe-body-left">
						<a href="#"><img src="img/淘宝安全中心.png" style="width: 190px;height: 100px;margin: 10px 0;"></a>
						<div class="fast-portal">
							<div class="fast-portal-head">
								<div style="width:170px;height:17px;padding: 9px 9px 10px 9px;">
									<h3 style="color: #656565;font-size: 14px;font-weight: 700;float: left;display: inline;">快速入口</h3>
									<a href="#" style="float: right;"><img src="img/设置灰色.png"></a>
								</div>
							</div>
							<div class="fast-portal-body">
								<ul>
										<li><a href="#">关闭指纹支付</a></li>
										<li><a href="#">重置登录密码</a></li>
										<li><a href="#">修改密码保护问题</a></li>
										<li><a href="#">管理无线支付</a></li>
										<li><a href="#">银行卡管理入口</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="safe-body-right">
						<div class="safe-body-right-head">
							<ul>
								<li><a class="safe-body-right-a1">保护资金安全</a></li>
								<li><a class="safe-body-right-a2">保护账户安全</a></li>
								<li><a class="safe-body-right-a3">保护隐私安全</a></li>
							</ul>
						</div>
						<div class="safe-body-right-contant1">
							<img style="margin-top: 10px;" src="img/1.png">
							<ul>
								<li><a>重置</a></li>
								<li><a>查看</a></li>
								<li><a>管理</a></li>
								<li style="margin-bottom: 45px;">    </li>
								<li><a>申请</a></li>
							</ul>
						</div>
						<div class="safe-body-right-contant2">
							<img style="margin-top: 12px; margin-left: -5px;" src="img/2.png">
							<ul>
								<li><a>重置</a></li>
								<li><a>管理</a></li>
								<li><a>查看</a></li>
								<li><a>查看</a></li>
								<li><a>设置</a></li>
							</ul>
						</div>
						<div class="safe-body-right-contant3">
							<img style="margin-top: 10px; margin-left: -7px;" src="img/3.png">
						</div>
						<div class="ads" style="float: left; margin-top: 10px;">
							<a href="#"><img src="img/蚂上知道.jpg"></a>
							<a href="#"><img src="img/病毒查杀.png"></a>
							<a href="#"><img src="img/真客服.jpg"></a>
						</div>
					</div>
					
					
					
				</div>
			</div>
			<div class="safe-tool">
				<div class="lunbotu">
						<img src="img/2-1.jpg" class="show">
						<img src="img/2-2.jpg">
						<img src="img/2-3.jpg">
						<img src="img/2-4.jpg">
						<img src="img/2-5.jpg">
				</div>
				<div class="select-button">
					<ul>
						<li class="active">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
					</ul>
				</div>
				<div class="safety-affairs">
					<div style="width: 62px;height: 28px;margin-left: 10px;float:left;font-size: 12px;color: #666;font-weight: bold;">
						安全动态：
					</div>
					<div class="slide-affairs">
						<ul>
							<li class="current"><a href="">支付宝安全攻略大放送 </a></li>
							<li><a href="">网络安全状况有奖调查 </a></li>
							<li><a href="">火眼金睛识别网络传销 </a></li>
							<li><a href="">识别钓鱼有妙招 </a></li>
						</ul>
					</div>
					<!--<div class="slide-affairs-button">
						<ul>
							<li class="slide-affairs-button-li1"><</li>
							<li class="slide-affairs-button-li2">></li>
						</ul>	
					</div>-->
				</div>
				<div class="safety-pro">
					安全产品
				</div>
				<div class="ukey">
					<img style="margin-top: 3px; float: left;" src="img/安全产品.png">
					<span class="more">
						查看详情
					</span>
				</div>
			</div>
			<div class="safe-uni">
				<img src="img/安全联盟.png">
				<img src="img/安全联盟2.png">
			</div>
			<div class="safe-scho">
				<img src="img/安全学堂.png">
				<div class="safety-class">
					<div class="title">
						<h3>安全课堂</h3>
						<span>轻松掌握各种安全知识</span>
					</div>
					<div class="safety-class-body">
						<div class="safety-class-body-slide">
							<ul>
								<li class="safe-body-slide-li1"><a href="#">躺着赚钱—网络兼职需谨慎</a></li>
								<li class="safe-body-slide-li2"><a href="#">莫着急——付款之前擦亮眼</a></li>
								<li class="safe-body-slide-li3"><a href="#">熟人借钱——冒充好友骗子多</a></li>
								<li class="safe-body-slide-li4"><a href="#">真假客服——小心“消保金”骗局</a></li>
								<li class="safe-body-slide-li5"><a href="#">猜猜我是谁——小心你的“领导”</a></li>
							</ul>
							<div class="safety-class-body-slide-img">
								<ul>
									<li class="safety-class-body-slide-img1"><img src="img/骗术1.jpg"></li>
									<li><img src="img/骗术2.jpg"></li>
									<li><img src="img/骗术3.jpg"></li>
									<li><img src="img/骗术4.jpg"></li>
									<li><img src="img/骗术5.jpg"></li>
								</ul>
							</div>
							<span><a href="#">更多防骗案例</a></span>
						</div>
						<div class="safety-class-body-test">
							<img src="img/防骗IQ测试.png">
							<span><a href="#">开始测试</a></span>
							<img style="margin-top:42px"src="img/防骗IQ测试2.png">
						</div>
					</div>
					<div class="safety-class-body-protect">
						<div>
							<h4><a href="#" class="title-a">保护账户安全</a></h4>
							<ul>
								<img src="img/3-1.png">
								<li><a href="#">为您打造安全的账户</a></li>
								<li><a href="#">账户资金异动通知</a></li>
								<li><a href="#">隐私保护策略</a></li>
							</ul>
						</div>
						<div>
							<h4><a href="#" class="title-a">保护网络交易安全</a></h4>
							<ul>
								<img src="img/3-2.png">
								<li><a href="#">“担保交易”让您安心购物</a></li>
								<li><a href="#">联手打击钓鱼网站</a></li>
								<li><a href="#">网购交流工具选择</a></li>
								<li><a href="#">风险管理和实时监控</a></li>
							</ul>
						</div>
						<div>
							<h4><a href="#" class="title-a">自我保护从头学起</a></h4>
							<ul>
								<img src="img/3-3.png">
								<li><a href="#">支付宝里放余额安全吗？</a></li>
								<li><a href="#">网上支付安全吗？</a></li>
								<li><a href="#">支付宝账户安全吗？</a></li>
							</ul>
						</div>
					</div>	
				</div>
			</div>
			<div class="safe-ser">
				<div class="safe-ser-guashi">
					<div class="safe-ser-guashi-head">
        				<h3 class="safe-ser-guashi-head-title">快速挂失</h3>
    				</div>
    				<div>
				        <p class="safe-ser-guashi-message">
				            <img src="img/i.png">
				           	<span>挂失成功后无法登录，请做好资金安排</span>
				        </p>
				        <div class="safe-ser-guashi-content">
				            <div class="phone">
				            	<img src="img/phone.png">
				            	<h3>手机丢失</h3>
				            	<a href="#" id="quickReportMobile">快速挂失</a>	
				            </div>
				            <div class="computer">
				            	<img src="img/compu.png">
				            	<h3>账户风险</h3>
				            	<a href="#" id="quickReportAccount">快速挂失</a>	
				            	<p>如有资金损失，拨打95188报案</p>
				            </div>
				        </div>
				    </div>
				</div>
				<div class="safe-ser-jiechu">
					<div class="safe-ser-jiechu-head">
        				<h3 class="safe-ser-jiechu-head-title">解除挂失</h3>
    				</div>
    				<div class="safe-ser-jiechu-content">
    					<img src="img/锁.png">
    					<div>
	                        <p>确保账户安全后可解除挂失</p>
	                        <p>1.手机号码无法找回请解除挂失后换绑定手机</p>
	                        <p>2.账户有风险解除挂失后请重置登录密码和支付密码</p>
                    	</div>
                    	<a href="#" id="quickReportAccount">解除挂失</a>
    				</div>
				</div>        
			</div>
		</div>
		<div class="global-foot">
			<div>
				<div class="footer-link">
				    <a href="#">诚征英才</a>
			       	<em>|</em>
			       	<a href="#">联系我们</a>
			       	<em>|</em>
			       	<a href="#">International Business</a>
				</div>
				<div class="footer-copyright">
					<a href="#">ICP证：沪B2-20150087</a>
				</div>
			</div>	
		</div>
	</body>
</html>
